<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 人事管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="人事管理系统">
<meta name="description" content="人事管理系统">
<meta name="author" content="gec">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
	position: relative;
}

.lyear-login {
	display: flex !important;
	min-height: 100vh;
	align-items: center !important;
	justify-content: center !important;
}

.lyear-login:after {
	content: '';
	min-height: inherit;
	font-size: 0;
}

.login-center {
	background-color: rgba(255, 255, 255, .075);
	min-width: 29.25rem;
	padding: 2.14286em 3.57143em;
	border-radius: 3px;
	margin: 2.85714em;
}

.login-header {
	margin-bottom: 1.5rem !important;
}

.login-center .has-feedback.feedback-left .form-control {
	padding-left: 38px;
	padding-right: 12px;
	background-color: rgba(255, 255, 255, .075);
	border-color: rgba(255, 255, 255, .075)
}

.login-center .has-feedback.feedback-left .form-control-feedback {
	left: 0;
	right: auto;
	width: 38px;
	height: 38px;
	line-height: 38px;
	z-index: 4;
	color: #dcdcdc;
}

.login-center .has-feedback.feedback-left.row .form-control-feedback {
	left: 15px;
}

.login-center .form-control::-webkit-input-placeholder {
	color: rgba(255, 255, 255, .8);
}

.login-center .form-control:-moz-placeholder {
	color: rgba(255, 255, 255, .8);
}

.login-center .form-control::-moz-placeholder {
	color: rgba(255, 255, 255, .8);
}

.login-center .form-control:-ms-input-placeholder {
	color: rgba(255, 255, 255, .8);
}

.login-center .custom-control-label::before {
	background: rgba(0, 0, 0, 0.3);
	border-color: rgba(0, 0, 0, 0.1);
}

.login-center .lyear-checkbox span::before {
	border-color: rgba(255, 255, 255, .075)
}

#showO {
	float: right;
	margin-right: -40px;
	margin-top: -45px;
	display: none;
}

#showT {
	float: right;
	margin-right: -40px;
	margin-top: -45px;
	display: none;
}
</style>
</head>

<body>
	<div class="row lyear-wrapper"
		style="background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); background-size: cover;">
		<div class="lyear-login">
			<div class="login-center">
				<div class="login-header text-center">
					<img alt="light year admin" src="images/logo-hrm.png">
				</div>
				<form action="login" method="post" name="autoLogin">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入您的账号" class="form-control"
							name="loginname" id="loginname" value="${cookie.lname.value }"
							required="required" /><span id="showO"
							class="mdi mdi-close-circle-outline mdi-36px
							"></span> <span
							id="showT"
							class="mdi mdi-checkbox-marked-circle mdi-36px mdi-light
							"></span>
						<span class="mdi mdi-book-open form-control-feedback"
							aria-hidden="true"></span>
					</div>
					<div class="form-group has-feedback feedback-left">
						<input type="password" placeholder="请输入您的密码" class="form-control"
							value="${cookie.lpwd.value }" id="password" name="password"
							required="required" /> <span
							class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
					</div>
					<div class="form-group has-feedback feedback-left row">
						<div class="col-xs-7">
							<input type="text" name="captcha" id="captcha"
								class="form-control" placeholder="请输入验证码"
								value="<c:if test="${cookie.containsKey('lname') }">1</c:if>"
								required="required"> <span
								class="mdi mdi-check-all form-control-feedback"
								aria-hidden="true"></span>
						</div>
						<div class="col-xs-5">
							<img src="checkCodeBy" class="pull-right" id="captcha"
								style="cursor: pointer;" onclick="changeImg(this)" title="点击刷新"
								alt="captcha">
						</div>
					</div>
					<div class="form-group">
						<label class="lyear-checkbox checkbox-primary m-t-10 text-white">
							<input type="checkbox" name="autoLogin" id="autoLogin"
							<c:if test="${cookie.containsKey('lname') }">checked</c:if>><span>7天免登录</span>
						</label>
					</div>
					<div class="form-group">
						<button class="btn btn-block btn-primary" type="submit">立即登录</button>
						<c:if test="${cookie.containsKey('lname') }">
							<script>
							setTimeout(function() {
								document.autoLogin.submit();
							}, 1000);
							</script>
						</c:if>
					</div>
				</form>
				<footer class="col-sm-12 text-center text-white">
					<p class="m-b-0">
						<a href="forgetpwd.jsp">忘记密码</a>&nbsp;&nbsp;&nbsp;<a
							href="register.jsp">没有账号?点我立即注册!</a>
					</p>
					<p class="m-b-0">HRM © 2022 . 人事管理系统</p>
				</footer>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<!--消息提示-->
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script type="text/javascript">
		function changeImg(pic) {
			pic.src = "checkCodeBy?" + new Date().getTime(); //加上一个参数，当前时间的毫秒值，这样请求就可以发送出去了
		}

		$(function() {
			//给文本框绑定一个失去焦点的事件blur
			$("#loginname").on("blur", function() {
				//先得到文本框中的值
				var loginname = $(this).val();
				//发送一个ajax的异步请求
				if (loginname != "") { //没有输入内容时不判断
					$.ajax({
						url : "lNameCheck",
						data : {
							"loginname" : loginname
						},
						async : true,
						type : "post",
						dataType : "text",
						success : function(resultData) { //当ajax请求成功了，会自动执行的回调函数,参数resultData,服务器端返回给客户的数据自动映射在resultData变量当中
							if (resultData == "true") {
								$("#showO").hide();
								$("#showT").show();
							} else {
								$("#showO").show();
								$("#showT").hide();
							}
						},
						error : function() {//如果ajax执行过程中出错，会自动执行error的这个回调函数
							alert("请求出错了!!");
						}
					});
				}
			});
		});
	</script>
	<c:if test="${msg eq '登录成功!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('main.action');
				lightyear.notify(msg, 'success', 500);
			}, 1);
		</script>
	</c:if>
	<c:if test="${msg eq '您的账号处于禁用状态!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('login.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
	<c:if test="${msg eq '账号或密码错误!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('login.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
	<c:if test="${msg eq '验证码错误!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('login.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
</body>
</html>